<template>
	<view class="" style="padding-bottom: 150rpx;">
		<view class="mainpadding">
			<view class="" style="padding-bottom: 100rpx;">
				<view class="blockbox mainpadding">
					<view class="ershiba xiaobai fonweight">描述</view>
					<textarea class="textarea margin_top xiaobai" placeholder="请输入内容..." v-model="des"></textarea>
				</view>
				<view class="blockbox mainpadding margin_top">
					<view class="ershiba xiaobai fonweight">选择封面图</view>
					<view class="flexleft flex_wrap">
						<view class="sanshis flexcenter margin_top" v-if="!image_text"  @click="uploadImg()">
							<view class="shanbox flexcenter">
								<view class="">
									<u-icon name="camera-fill" color="#999999" size="42"></u-icon>
									<view class="smalltext xiaohui margin_top1">选择封面</view>
								</view>
							</view>
						</view>
						<view class="sanshis flexcenter margin_top" v-if="image_text">
							<view class="tupian">
								<image :src="image_text" mode=""></image>
								<view class="deleteimg" @click="image='';image_text=''"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="blockbox mainpadding margin_top">
					<view class="flexbetween">
						<view class="ershiba xiaobai fonweight">选择视频</view>
						<view class="xiaohong smalltext" v-show="video_text" @click="video_text='';video_url=''">删除视频</view>
					</view>
					<view class="margin_top">
						<view class="" v-show="!video_text" @click="upvideo">
							<view class="videobox flexcolumn">
								<u-icon name="play-circle-fill" color="#999999" size="42"></u-icon>
								<view class="smalltext xiaohui margin_top1">选择视频</view>
							</view>
						</view>
						<video :src="video_text" class="videobox" v-show="video_text"></video>
					</view>
				</view>
				<view class="blockbox flexbetween mainpadding margin_top">
					<view class="ershiba xiaobai fonweight">视频类型</view>
					<u-radio-group v-model="data_type" placement="row" circle>
						<u-radio activeColor="#dd5056" :customStyle="{marginRight: '30rpx'}" label="视频" name="1"></u-radio>
						<u-radio activeColor="#dd5056" :customStyle="{marginRight: '30rpx'}" label="短视频" name="2"></u-radio>
					</u-radio-group>
				</view>
				<view class="blockbox mainpadding margin_top">
					<view class="ershiba xiaobai fonweight">话题标签</view>
					<view class="flexleft flex_wrap">
						<view class="flexcenter margin_top1" v-for="item in bqArr" :key="item.id" @click="item.ischeck = !item.ischeck">
							<view :class="item.ischeck?'yixzbtn margin_right1':'wixbtn margin_right1'">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding2" style="background-color:#100D1F ;">
				<view class="bigbtn" @click="submit">确认发布</view>
			</view>
		</view>
		
		<tabbar :current="2" ref="tabbardiref"></tabbar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				video_url: "",
				video_text: "",
				image: "",
				image_text: "",
				des: "",
				sc: "",
				data_type: "1" ,//1视频，2短视频
				bqArr:[]
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.init()
		},
		onShow() {
			setTimeout(()=>{
				this.$refs.tabbardiref.noreadNum = 0
				this.$refs.tabbardiref.getnoreadNum()
			},100)
		},
		methods: {
			init(){
				httpRequest.request('/api/index/flagIndex', 'GET', {
				}).then(res => {
					res.data.forEach(item=>{
						this.$set(item,"ischeck",false)
					})
					this.bqArr = res.data
				})
			},
			submit() {
				let flagidarr = []
				this.bqArr.forEach(item=>{
					if(item.ischeck)flagidarr.push(item.id)
				})
				if(this.des==""){
					httpRequest.toast("请输入描述内容")
					return false
				}
				if(this.image==""){
					httpRequest.toast("请上传封面图")
					return false
				}
				if(this.video_url==""){
					httpRequest.toast("请上传视频")
					return false
				}
				if(flagidarr.length==0){
					httpRequest.toast("请选择话题标签")
					return false
				}
				httpRequest.request('/api/videocl/addVideo', 'POST', {
					video_url: this.video_url,
					des: this.des,
					flag_ids:flagidarr.join(),
					image: this.image,
					sc:this.sc,
					data_type: this.data_type,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.chongzhi()
					}
				})
			},
			chongzhi(){
				this.bqArr.forEach(item=>{
					item.ischeck = false
				})
				this.des = ""
				this.image = ""
				this.image_text = ""
				this.sc = ""
				this.video_text = ""
				this.video_url = ""
				this.data_type = "1"
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
									
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.image = res.url
					this.image_text = image_item
				}).catch(err => {});
			},
			upvideo(upvideo, upvideo_text) { //上传视频
				let uploadFile = ''
				let _this = this;
				// 1.选择要上传的视频
				uni.chooseVideo({
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					success: function(res) {
						_this.uploadImageServicet(res.tempFilePath, upvideo, upvideo_text)
						console.log(res,"就hi傻瓜等哈说");
						_this.sc = res.duration
					}
				});
			},
			uploadImageServicet(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.video_url = res.url
					this.video_text = image_item
					console.log(this.video_text);
				}).catch(err => {});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio-group {
		flex: none !important;
	}

	.wixbtn {
		background-color: #3e3b4a;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #CBCBCB;
		padding: 10rpx 27rpx;
		border: 1rpx solid #3e3b4a;
		border-radius: 8rpx;
	}

	.yixzbtn {
		padding: 10rpx 27rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #DD5056;
		border: 1rpx solid #DD5056;
		background-color: #3a293a;
		border-radius: 8rpx;
	}

	.tupian {
		position: relative;
		width: 192.76rpx;
		height: 192.76rpx;
		border-radius: 10rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.shanbox {
		width: 192.76rpx;
		height: 192.76rpx;
		border-radius: 20rpx;
		background-color: #3d3a4a;
	}

	.videobox {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #3d3a4a;
	}

	.textarea {
		width: 100%;
		box-sizing: border-box;
		height: 140rpx;
	}

	.blockbox {
		background: #282536;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
</style>